<template>
	<view class="index page">
		<view class="header">
			<nav-bar title="活动周报"></nav-bar>
		</view>
		<view class="main">
			<view class="header">
				<view class="title">
					<view class="left">
						第五十六期活动周报
					</view>
					<navigator url="/pages/index/weekly-publication/report/index" class="right">
						查看往期
					</navigator>
				</view>
				<view class="time">
					2023-03-13——2023-03-19
				</view>
				<view class="message">
					举办活动: 15场
				</view>
				<view class="message">
					参与部门: 8个
				</view>
				<view class="message">
					参与人次: 893人
				</view>
			</view>
			<view class="container">
				<view class="popularity layout">
					<view class="topic">
						最具人气活动
					</view>
					<view class="content">
						<view class="active-item">
							<view class="left">
								<image src="" mode=""></image>
								<view class="tag">
									阳光
								</view>
								<view class="type">
									<text>德育</text>
								</view>
							</view>
							<view class="right">
								<view class="title">
									组织体能训练
								</view>
								<view class="partment">
									主办:XX部门
								</view>
								<view class="time">
									时间:2023-02-01 12:00:00
								</view>
								<view class="addr">
									地点:织里镇公安分局
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="comment layout">
					<view class="topic">
						最受好评活动
					</view>
					<view class="content">
						<view class="active-item">
							<view class="left">
								<image src="" mode=""></image>
								<view class="tag">
									阳光
								</view>
								<view class="type">
									<text>德育</text>
								</view>
							</view>
							<view class="right">
								<view class="title">
									组织体能训练
								</view>
								<view class="partment">
									主办:XX部门
								</view>
								<view class="time">
									时间:2023-02-01 12:00:00
								</view>
								<view class="addr">
									地点:织里镇公安分局
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="direct layout">
					<view class="topic">
						最佳活动主办
					</view>
					<view class="content">
						<view class="active-item">
							<view class="left">
								<image src="" mode=""></image>
							</view>
							<view class="right">
								<view class="title">
									xxxx部门
								</view>
								<view class="partment">
									主办活动:4场
								</view>
								<view class="time">
									参与人次:900人
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="style layout">
					<view class="topic">
						活动风采
					</view>
					<view class="content">
						<view class="active-item" v-for="(item, index) in [1,2,3,4]">
							<view class="left">
								<image src="" mode=""></image>
								<view class="tag">
									阳光
								</view>
								<view class="type">
									<text>德育</text>
								</view>
							</view>
							<view class="right">
								<view class="title">
									组织体能训练
								</view>
								<view class="partment">
									主办:XX部门
								</view>
								<view class="time">
									时间:2023-02-01 12:00:00
								</view>
								<view class="addr">
									地点:织里镇公安分局
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	@import "@/common/style/common.scss";
	.index{
		@include flex-c;
		>.header{
			flex: 0 0 auto;
		}
		>.main{
			flex: 1 0 0;
			overflow: auto;
			padding: 24rpx 32rpx 0;
			border-top: #F1F1F1 solid 2rpx;
			>.header{
				font-size: 24rpx;
				color: #4A4A4A;
				>.title{
					@include flex-r-between-start;
					font-weight: 600;
					.left{
						line-height: 44rpx;
						font-size: 32rpx;
					}
					.right{
						text-decoration: underline;
						line-height: 34rpx;
					}
				}
				.time{
					color: #9B9B9B;
					padding: 16rpx 0 32rpx;
				}
				.message{
					line-height: 40rpx;
				}
			}
			>.container{
				//公共样式
				.layout{
					@include flex-c-start-center;
					.topic{
						@include flex-r-center-center;
						font-size: 28rpx;
						color: #FFFFFF;
						font-weight: 600;
						width: 216rpx;
						height: 54rpx;
						// line-height: 54rpx;
						border-radius: 28rpx;
						margin: 20rpx 0 32rpx;
					}
					.content{
						width: 100%;
						@include active;
					}
				}
				// 最具人气活动样式
				.popularity{
					.topic{
						background: linear-gradient(270deg, #F7AC78 0%, #F81919 100%);
						margin: 44rpx 0 32rpx;
					}
				}
				// 最受好评活动样式
				.comment{
					.topic{
						background: linear-gradient(90deg, #A17FF1 0%, #8272FF 36%, #4FB4E7 86%, #32D8DC 100%);
					}
				}
				// 最佳活动主办样式
				.direct{
					.topic{
						background: linear-gradient(90deg, #3023AE 0%, #53A0FD 78%, #0FB6FB 100%);
					}
					.content{
						.active-item{
							.right{
								.title{
									padding: 0 0 46rpx;
								}
							}
						}
					}
				}
				// 活动风采样式
				.style{
					.topic{
						background: linear-gradient(180deg, #1C88F7 0%, #71DDF7 100%);
					}
				}
			}
		}
	}
</style>